<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #parent-container {
            display: inline-block;
            min-width: 300px;
            min-height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>

<div><input id="checkbox" type="checkbox"> 开始观察</div>

<div id="parent-container">
    <textarea aria-label="拉伸改变父容器的宽高" rows="3"></textarea>
</div>

<script>

    // 创建 ResizeObserver 实例
    var resizeObserver = new ResizeObserver(function (entries) {
        for (var entry of entries) {

            // 兼容性处理
            if (entry.contentBoxSize) {
                //火狐
            } else {
                //其它
            }

            document.querySelector('textarea').innerText = `${entries[0].contentRect.width} * ${entries[0].contentRect.height}`

        }
    });

    // 监听父容器的尺寸变化
    var parentContainer = document.getElementById('parent-container');


    document.querySelector('#checkbox').addEventListener("change", () => {
        if (checkbox.checked) {
            resizeObserver.observe(parentContainer);
        } else {
            resizeObserver.unobserve(parentContainer);
        }
    });

</script>

</body>
</html>
